<template>
  <div>
    <Card hoverable>
      <span>{{ metricName }}{{ props.activeKey === '2' ? '总' : '在线' }}用户数</span>
      <div :id="metricName" class="md:h-4/5 !md:w-full enter-x" style="width: 600px; height: 300px"></div>
    </Card>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import { onMounted, watch } from 'vue';

const props = defineProps({
  metricName: String,
  time: Array,
  value: Array,
  activeKey: String,
});

onMounted(() => {
  let chartDom = document.getElementById(props.metricName);
  let myChart = echarts.init(chartDom);
  let option;
  option = {
    xAxis: {
      type: 'category',
      data: props.time,
    },
    tooltip: {
      trigger: 'axis',
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: props.value,
        type: 'line',
        smooth: true,
      },
    ],
  };
  watch(
    () => props.value,
    () => {
      option.series[0].data = props.value;
      option.xAxis.data = props.time;
      option && myChart.setOption(option);
    },
    { immediate: true }
  );
});
</script>
